<template>
  <div class="wrapper">
  	<div class="main_wrap" :style="{transform:'scale('+ ratio +')'}">
      <div class="head">
        <img src="/static/logo/logo_md.png" alt="" class="logo">
        <h1 class="title">客户系统中心租户配置平台</h1>
      </div>
      <div class="body">
        <div class="title">
          <p>Hey welcome!</p>
          <div>欢迎登录</div>
        </div>
        <div class="form_wrap">
          <el-form ref="inputForm" :model="inputForm" :rules="rules" class="login-form"  @keyup.enter.native="login()" @submit.native.prevent>
            <el-form-item  prop="username">
              <el-input
                  placeholder="请输入手机号 / 用户名"
                  prefix-icon="el-icon-user"
                  v-model="inputForm.username">
                  <div class="form_validate_tip" slot='suffix'>
                    <i class="icon el-icon-success"></i>
                    <i class="icon el-icon-warning"></i>
                  </div>
              </el-input>
            </el-form-item>
            <el-form-item prop="password" >
              <el-input
                  type="password"
                  placeholder="请输入密码"
                  prefix-icon="el-icon-lock"
                  v-model="inputForm.password">
                  <div class="form_validate_tip" slot='suffix'>
                    <i class="icon el-icon-success"></i>
                    <i class="icon el-icon-warning"></i>
                  </div>
              </el-input>
            </el-form-item>
            <el-form-item prop="checked" class="remember">
            	<div class="checkbox_wrap" @click="checked=!checked">
            		<span class="checkbox" :class="checked?'checked':''">
            			<i class="icon el-icon-check"></i>
            		</span>
            		<span>记住用户名</span>
            	</div>
              <!--<el-checkbox v-model="checked">记住用户名</el-checkbox>-->
              <el-link type="primary" style="float: right;" :underline="false" @click="forget">忘记密码？</el-link>
            </el-form-item>
            <el-form-item style="margin-top:42px;margin-bottom:10px">
              <el-button type="primary" :loading="loading" class="btn_login" @click="login">登录</el-button>
            </el-form-item>
            <!--<div class="text_center">
            	<el-button type="text" style="color:#666" @click="register">立即注册</el-button>
            </div>-->
          </el-form>
        </div>
      </div>
    <!--<div class="footer">
      <div class="link_wrap">
        <a href="javascript:;" class="link">帮助</a>
        <a href="javascript:;" class="link">隐私</a>
        <a href="javascript:;" class="link">条款</a>
      </div>
      <div class="copyright">copyright©云物流</div>
    </div>-->
    <!--<div class="header1">
      <section style="width: 13%;margin-top: 1.3%;"> <img style="width: 100%;margin-left: 24%;
 object-fit: contain;" src="/static/img/logo.png" /></section>

      <span style="font-size: 180%;margin-left: 5.4%;display: block;margin-top: 1.6%;color: #333333;">客户系统中心租户配置平台</span>
    </div>
    <div class="login-content">
      <div class="header">
        <p><span style="padding-right: 10px;">Hey</span>  welcome!</p>
         <p>欢迎登陆</p>
      </div>
      <div class="center">
        <el-form ref="inputForm" style="margin-top: -10px;" :model="inputForm" :rules="rules" class="login-form"  @keyup.enter.native="login()" @submit.native.prevent>
          <el-form-item  prop="username">
            <el-input type="text" placeholder="请输入手机号 / 用户名"
        v-model="inputForm.username">

            </el-input>
          </el-form-item>
          <el-form-item prop="password" style="margin-top: 30px;">
            <el-input type="password" placeholder="请输入密码"  v-model="inputForm.password">

            </el-input>
          </el-form-item>
          <el-form-item prop="checked" class="remember">
            <div><el-checkbox v-model="checked" @change="changerRember">记住用户名</el-checkbox></div>
            <div><el-link type="primary" :underline="false">忘记密码？</el-link></div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" class="login-submit" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>-->

      <el-dialog
        title="选择企业"
        :visible.sync="innerVisible"
        class="addForm-wrapper"
        label-width="93px"
        append-to-body>
        <el-form>
          <el-form-item>
            <el-select clearable v-model="tenantId" placeholder="请选择企业">
              <el-option
                v-for="item in tenantList"
                :key="item.id"
                :label="item.fullName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
<!--        <el-button size="small" @click="close()">取消</el-button>-->
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import {setLocalStorage,getLocalStorage} from "@/utils/localstore.js"
  export default {
    name: 'login2',
    data () {
      return {
      	viewWidth:'',
	      viewHeight:'',
	      mainWidth:1465+200,
	      mainHeight:797+200,
	      ratio:1,//自适应比例
      
        time: '',
        logo: '',
        token: '',
        refreshToken: "",
        tenantList: [],
        tenantId: '',
        innerVisible: false,
        productName: '',
        loading: false,
        checked: false,
        inputForm: {
          username: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        rules: {
          username: [
            {required: true, message: '手机号/用户名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ],
          captcha: [
            {required: true, message: '验证码不能为空', trigger: 'blur'}
          ]
        },
        captchaPath: ''
      };
    },
    created () {
	    this.renderDom()
	    window.onresize=()=>{
	      this.renderDom()
	    }
      this.getTime()
      setInterval(() => {
        this.getTime()
      }, 1000)
    },
    mounted () {
      if(Vue.cookie.get('checked')=='1'){
        this.checked=true
      }else{
        this.checked=false
      }
      this.inputForm.username=Vue.cookie.get('username')
      this.inputForm.password=Vue.cookie.get('password')
      this.$http.get('/sys/sysConfig/queryById').then(({data}) => {
        // this.logo = data.config.logo
        this.productName = data.config.productName
      })
    },
    methods: {
    	//大小屏自适应
	    renderDom(){
	      this.viewWidth=window.innerWidth;
	      this.viewHeight=window.innerHeight;
	      let ratioH=this.viewHeight/this.mainHeight;
	      let ratioW=this.viewWidth/this.mainWidth;
	      if(ratioW>1&&ratioH>1){
	        return;
	      }
	      if(ratioH>ratioW){
	        this.ratio=ratioW.toFixed(6)
	      }else{
	        this.ratio=ratioH.toFixed(6)
	      }
	    },
      // 向localStorage存入标识
      doSubmit() {
        if (this.tenantId) {

          for (let i = 0; i < this.tenantList.length; i++) {
            const tenantListElement = this.tenantList[i];

            if (tenantListElement.id === this.tenantId) {
              // setLocalStorage('name', 'hello, world');
              // var localKey = getLocalStorage('name');
              if (tenantListElement.state === 3) {
                this.$Msg.warning({
                  title: '服务已到期',
                  content: "服务已到期，请联系您的客服人员！",
                  autoClose: false
                });
              }
              if (tenantListElement.state === 2) {
                this.$cookie.set('token', this.token)
                this.$cookie.set('refreshToken', this.refreshToken)
                // setLocalStorage('tenantCode', tenantListElement.codes+"-sys");
                sessionStorage.setItem("configFlag",'yet')
                sessionStorage.setItem('tenantList', JSON.stringify(this.tenantList))
                sessionStorage.setItem('tenantData', JSON.stringify(tenantListElement))
                sessionStorage.setItem('tenantId',this.tenantId)
                console.log( sessionStorage.getItem("configFlag"))
                this.$router.push({name: 'home'})
              }
            }
          }
        } else {
          this.$notify.error({
            title: '错误',
            message: '请选择单条业务数据'
          })
        }
      },
      close() {
        this.innerVisible = false
      },
      //切换记住密码
      changerRember(){
        if(this.checked){
          Vue.cookie.set('password',this.inputForm.password)
          Vue.cookie.set('username',this.inputForm.username)
          Vue.cookie.set('checked',1)
        this.inputForm.username=Vue.cookie.get('username')
        this.inputForm.password=Vue.cookie.get('password')
        }else{
          Vue.cookie.set('checked',0)
          Vue.cookie.set('password','')
          Vue.cookie.set('username','')
        }

      },

      // 提交表单
      login () {
        console.log(this.inputForm.username)
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            setLocalStorage('tenantCode', null)
            setLocalStorage('bookDbName', null)
            this.$http({
              url: '/api/admin/configurationLogin',
              method: 'post',
              data: {
                'userName': this.inputForm.username,
                'password': this.inputForm.password
              }
            }).then((res) => {
              console.log(res)
              if (res && res.data.success) {
//              if(this.checked){
//                Vue.cookie.set('password',this.inputForm.password)
//                Vue.cookie.set('username',this.inputForm.username)
//              }
								this.changerRember()
                this.innerVisible = true;
                this.tenantList = res.data.result.TenantData.tenantList;
                this.token = res.data.result.token;
                this.refreshToken = res.data.result.refreshToken;
              } else {
                this.loading = false
                // this.getCaptcha()
              }
            })
          }
        })
      },
      number2(e){
        e=e.replace(/\s+/g,'')
        console.log(e)
        console.log(this.inputForm.username)
      },
      getTime () {
        this.time = this.moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      },
      // 获取验证码
      getCaptcha () {
        this.captchaPath = this.$http.BASE_URL + `/captcha.jpg`
      },
	    // 忘记密码
	    forget () {
	      this.$message({
	        type: 'info',
	        message: '请联系管理员重置密码'
	      })
	    },
    }
  }
</script>

<style lang="scss" scoped>
.text_center{
	text-align: center;
}
.wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  background: url(https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/bg_login.png) no-repeat center;
  background-color:#4D31B8 ;
  background-size: cover;
}
.main_wrap{
  position: absolute;
  left: 50%;
  top:50%;
  margin-left: -700px;
  margin-top: -364px;
  width: 1400px;
  height: 729px;
  // background: url(../../../../assets/img/login_main.png) no-repeat center;
  background: url(https://cfhy.oss-cn-beijing.aliyuncs.com/jpc/ui/login_main.png) no-repeat center;
  background-size: 100.5%;
  border-radius: 20px;
}
.head{
  margin-left: 50px;
  margin-top: 53px;
  .logo{
    /*width: 225px;*/
    height: 46px;
  }
  .title{
    display: inline-block;
    margin: 0 0 4px 30px;
    font-weight: normal;
    font-size: 30px;
    vertical-align: middle;
    line-height: 46px;
    color: #fff;
  }
}
.body{
  position: absolute;
  right: 100px;
  top: 170px;
  width: 442px;
  &::before{
    content: "";
    position: absolute;
    top: -126px;
    right: -28px;
    width: 84px;
    height: 84px;
    background: linear-gradient(0deg, #007AFF 0%, rgba(0,122,255,0.2) 60%, rgba(255, 255, 255, 0) 100%);
    opacity: 0.46;
    border-radius: 50%;
  }
  .title{
    margin-bottom: 50px;
    /*font-weight: bold;*/
    font-size: 24px;
    color: #000;
    p{
      margin-bottom: 15px;
      font-weight: normal;
      font-size: 40px;
      color: #007AFF;
    }
  }
  ::v-deep .el-form{
    .el-form-item{
      margin-bottom: 38px;
    }
    .el-input__icon{
      line-height: 64px;
      width: 35px;
    }
    .el-input__prefix, .el-input__suffix{
      font-size: 18px;
    }
    .el-input__inner{
      padding-left: 40px;
      padding-right: 50px;
      border: 2px solid #ddd;
      font-size: 16px;
      height: 64px;
    }
    .el-checkbox__label{
      color: #666666;
    }
    .el-checkbox__input.is-checked  .el-checkbox__inner{
        border-color: #1890FF;
    }
    .el-checkbox__inner{
      border-color: #666666;
    }
    .el-form-item__error{
      padding-top: 10px;
      font-size: 14px;
    }
    .el-form-item__content{
      line-height: 1.1em;
    }
    .el-checkbox__label,.el-link{
      font-size: 16px;
    }
  }
  .btn_login{
    display: block;
    width: 443px;
    height: 65px;
    background: #007AFF;
    border-radius: 4px;
    font-size: 20px;
  }
}
.footer{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 4%;
  font-size: 14px;
  color: #fff;
  a{
    margin: 0 20px;
    color: inherit;
  }
  .copyright{
    margin-top: 15px;
  }
}
@media screen and (max-width:1400px) {
  .footer{
    font-size: 14px;
    .copyright{
      margin-top: 10px;
    }
  }
}
@media screen and (max-width:960px) {
  .footer{
    font-size: 12px;
    .copyright{
      margin-top: 6px;
    }
  }
}
.checkbox_wrap{
	display: inline-block;
	font-size: 16px;
	color: #3b3b3b;
	vertical-align: middle;
	.checkbox{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 14px;
		height: 14px;
		border: 1px solid #3b3b3b;
		text-align: center;
		vertical-align: middle;
		margin-right: 10px;
		border-radius:2px;
		float: left;
		transition: all ease 0.5s;
		margin:1px 10px 1px 0;
		.icon{
			transition: all ease 0.5s;
			opacity: 0;
			font-size: 12px;
			color: #fff;
		}
		&.checked{
			border-color: #1890FF;
			background-color: #1890FF;
			.icon{
				opacity: 1;
			}
		}
	}
}
</style>
